<script setup>
import CartCard from '@/components/Cart/CartCard.vue'
import {useShopInfoStore} from "@/stores/shop.js";
import {storeToRefs} from "pinia";
import {ref} from "vue";

const shopInfoStore = useShopInfoStore();
const {nearbyList} = storeToRefs(shopInfoStore);
const shopInfo = ref([]);
nearbyList.value.forEach((item, index) => {
  // console.log(item)
  if (item.cartList.length!==0){
    shopInfo.value.push(item)
    // console.log(item)
    // console.log(shopInfo.value)
  }
})
</script>

<template>
  <div class="cart_list">
    <div class="cart_list_header">我的全部购物车
      <span>({{ shopInfo.length }})</span>
    </div>
    <div class="cart_list_content">
      <div class="cart_list_content_item">
        <div style="text-align: center;color: red;font-weight: bolder" v-if="shopInfo.length===0">暂无购物车</div>
        <CartCard/>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.cart_list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: .5rem;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
    padding: .08rem .18rem;
    font-size: .16rem;
    color: $content-fontcolor;
    text-align: center;
    line-height: .24rem;
    background-color: $bgColor;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  &_content {
    margin-top: .58rem;
  }
}
</style>